<template>
  <div class="login-box">
    <div class="tab-box-switch">
        <ul class="switch-ul">
            <li @click="tabSelected=index" :class="tabSelected === index ?'tab-active' : ''"
                v-for="(txt,index) in tabList" :key="index">{{ txt }}
            </li>
        </ul>

        <div v-show="tabSelected===0">
            <el-form size="large" :model="userModel">
                <el-form-item style="margin-top: 24px;">
                    <el-input v-model="userModel.user" placeholder="手机号"/>
                </el-form-item>
                <el-form-item style="margin-top: 24px;">
                    <el-input v-model="userModel.pwd" placeholder="密码"/>
                </el-form-item>
                <el-form-item style="margin-top: 24px;">
                    <el-button type="primary">登 录</el-button>
                    <el-button text @click="$router.push('/login/register')">注 册</el-button>
                </el-form-item>
            </el-form>

        </div>
        <div v-show="tabSelected===1">
            <el-form size="large" :model="smsModel">
                <el-form-item style="margin-top: 24px;">
                    <el-input v-model="smsModel.mobile" placeholder="手机号"/>
                </el-form-item>
                <el-form-item style="margin-top: 24px;">
                    <el-row justify="space-between" style="width: 100%">
                        <el-input v-model="smsModel.code" placeholder="验证码" style="width: 70%" />
                        <el-button :disabled="btnSmsDisabled" @click="doSendSms">{{ bntSmsText }}</el-button>
                    </el-row>

                </el-form-item>
                <el-form-item style="margin-top: 24px;">
                    <el-button type="primary">登 录</el-button>
                    <el-button text @click="$router.push('/login/register')">注 册</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</div>
</template>
<script setup>
import {ref, reactive} from 'vue'
// 登录模式
let tabSelected = ref(1)
const tabList = reactive(["密码登录", "免密码登录"])

const userModel = reactive({
    user: '',
    pwd: '',
})
const btnSmsDisabled = ref(false);
const bntSmsText = ref("发送验证码")
const smsModel = reactive({
    mobile: '',
    code: '',
})

/**
 * 发送短信-计时器
 */
function doSendSms() {
    btnSmsDisabled.value = true;

    let txt = 5;
    let interval = window.setInterval(() => {
        txt -= 1;
        bntSmsText.value = `${txt}秒后重发`
        if (txt < 1) {
            bntSmsText.value = "重新发送";
            // 停止定时器
            window.clearInterval(interval);
            btnSmsDisabled.value = false;
        }
    }, 1000)

}
</script>